import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Alert, Modal, ScrollView, Linking } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Icon from 'react-native-vector-icons/Ionicons';
import { WebView } from 'react-native-webview';
import { useNavigation } from '@react-navigation/native';
import I18n from '../utils/i18n';

const APP_VERSION = '1.0.0'; // 替换为您的实际版本号

const SettingsPage = () => {
    const navigation = useNavigation();

    const [showWebView, setShowWebView] = useState(false);
    const [webViewUrl, setWebViewUrl] = useState('');
    const [showAboutUs, setShowAboutUs] = useState(false);

    const clearData = async () => {
        Alert.alert(
            I18n.t('clearData.title'),
            I18n.t('clearData.content'),
            [
                { text: I18n.t('clearData.cancel'), style: 'cancel' },
                {
                    text: I18n.t('clearData.ok'),
                    onPress: async () => {
                        try {
                            await AsyncStorage.clear();
                            // 发送一个事件通知其他页面数据已被清除
                            navigation.setParams({ dataCleared: Date.now() });
                            Alert.alert(I18n.t('success'), I18n.t('clearData.all_data_has_been_cleared'), [
                                { text: I18n.t('OK'), onPress: () => navigation.navigate('HomeTab') }
                            ]);
                        } catch (error) {
                            console.error('Error clearing data:', error);
                            Alert.alert(I18n.t('error'), I18n.t('clearData.data_clearing_failed'));
                        }
                    }
                }
            ]
        );
    };

    const showPrivacyPolicy = () => {
        setWebViewUrl('https://your-privacy-policy-url.com');
        setShowWebView(true);
    };

    const showUserAgreement = () => {
        setWebViewUrl('https://your-user-agreement-url.com');
        setShowWebView(true);
    };

    const showAboutUsModal = () => {
        setShowAboutUs(true);
    };

    const renderOption = (icon, text, onPress) => (
        <TouchableOpacity style={styles.option} onPress={onPress}>
            <Icon name={icon} size={24} color="#333" style={styles.optionIcon} />
            <Text style={styles.optionText}>{text}</Text>
        </TouchableOpacity>
    );

    return (
        <View style={styles.container}>
            <Text style={styles.title}>{I18n.t('system_settings')}</Text>
            {renderOption('trash-outline', I18n.t('clear_all_data'), clearData)}
            {renderOption('shield-outline', I18n.t('privacy_policy'), showPrivacyPolicy)}
            {renderOption('document-text-outline', I18n.t('user_agreement'), showUserAgreement)}
            {renderOption('information-circle-outline', I18n.t('about_us'), showAboutUsModal)}

            <Modal
                visible={showWebView}
                onRequestClose={() => setShowWebView(false)}
            >
                <WebView source={{ uri: webViewUrl }} />
                <TouchableOpacity style={styles.closeButton} onPress={() => setShowWebView(false)}>
                    <Icon name="close-circle" size={30} color="#333" />
                </TouchableOpacity>
            </Modal>

            <Modal
                visible={showAboutUs}
                transparent={true}
                animationType="slide"
                onRequestClose={() => setShowAboutUs(false)}
            >
                <View style={styles.modalView}>
                    <ScrollView>
                        <Text style={styles.modalTitle}>{I18n.t('about_us')}</Text>
                        <Text style={styles.versionText}>{I18n.t('edition', {app_version: APP_VERSION})} </Text>
                        <Text style={styles.aboutText}>
                            {I18n.t('aboutText')}
                        </Text>
                        <TouchableOpacity
                            style={styles.linkButton}
                            onPress={() => Linking.openURL('https://your-website.com')}
                        >
                            <Text style={styles.linkButtonText}>{I18n.t('visit_the_official_website')}</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                            style={styles.linkButton}
                            onPress={() => Linking.openURL('mailto:xchen6367@gmail.com')}
                        >
                            <Text style={styles.linkButtonText}>{I18n.t('feedback_and_assistance')}</Text>
                        </TouchableOpacity>
                    </ScrollView>
                    <TouchableOpacity style={styles.closeButton} onPress={() => setShowAboutUs(false)}>
                        <Icon name="close-circle" size={30} color="#333" />
                    </TouchableOpacity>
                </View>
            </Modal>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        backgroundColor: '#f5f5f5',
    },
    title: {
        fontSize: 24,
        fontWeight: 'bold',
        marginBottom: 20,
    },
    option: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 15,
        backgroundColor: '#fff',
        borderRadius: 10,
        marginBottom: 15,
    },
    optionIcon: {
        marginRight: 15,
    },
    optionText: {
        fontSize: 16,
    },
    closeButton: {
        position: 'absolute',
        top: 10,
        right: 10,
        padding: 10,
    },
    modalView: {
        margin: 20,
        backgroundColor: "white",
        borderRadius: 20,
        padding: 35,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 4,
        elevation: 5,
        maxHeight: '80%',
    },
    modalTitle: {
        fontSize: 22,
        fontWeight: 'bold',
        marginBottom: 15,
    },
    versionText: {
        fontSize: 16,
        marginBottom: 10,
    },
    aboutText: {
        fontSize: 14,
        marginBottom: 20,
        lineHeight: 20,
    },
    linkButton: {
        backgroundColor: '#3498db',
        padding: 10,
        borderRadius: 5,
        alignItems: 'center',
        marginBottom: 10,
    },
    linkButtonText: {
        color: 'white',
        fontSize: 16,
    },
});

export default SettingsPage;
